<template>
  <div class="goodsList">
    <!-- 头部 -->
    <van-nav-bar
      style="background-color:#f2f2f2"
      title="产品列表"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 搜索 -->
    <van-sticky>
      <van-search
        v-model="searchValue"
        show-action
        background="#dbdbdb"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </van-sticky>
    <!-- 排序 -->
    <div class="rankBox">
      <p @click="rankFun('shijian', 'timeRank')">
        时间
        <van-icon v-show="timeRank === 'down'" name="arrow-up" />
        <van-icon v-show="timeRank === 'up'" name="arrow-down" />
      </p>
      <p @click="rankFun('jiage', 'piceRank')">
        价格
        <van-icon v-show="piceRank === 'down'" name="arrow-up" />
        <van-icon v-show="piceRank === 'up'" name="arrow-down" />
      </p>
      <!-- 销量没有排序 -->
      <p @click="rankFun('xiaoliang', 'numRank')">
        销量
        <van-icon v-show="numRank === 'down'" name="arrow-up" />
        <van-icon v-show="numRank === 'up'" name="arrow-down" />
      </p>
    </div>
    <!-- 列表 -->
    <div style="margin-bottom:50px;margin-top:6px;">
      <van-card
        style="font-size:14px;"
        v-for="(item, index) in goodsArr"
        :key="index"
        :price="item.jiage"
        :desc="item.info"
        :title="item.cp_mingcheng"
        :thumb="item.cp_tupian"
        @click="toGoodsDetails(item)"
      />
    </div>
    <!-- 空 提示 -->
    <van-empty v-if="goodsArr.length === 0" description="暂无产品" />
    <!-- 底部导航 -->
    <PageTabs :childActive="0"></PageTabs>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
import PageTabs from '@/components/PageTabs';
export default {
  name: "goodsList",
  components: {
    PageTabs
  },
  data() {
    return {
      searchValue: "", //搜索关键字
      timeRank: "down", //时间排序
      piceRank: "down", //价格排序
      numRank: "down", //销量排序
      goodsArr: [], //列表数据
      active: 0, //底部导航选中
    };
  },
  mounted() {
    this.getGoodsList();
  },
  methods: {
    // 获取产品列表
    getGoodsList() {
      SERVE.getGoodsList()
        .then((res) => {
          this.goodsArr = res.data;
          this.initList();
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    onClickLeft() {
      this.$router.push("/index");
    },
    // 搜搜
    onSearch() {
      SERVE.searchGoodsList({
        params: {
          cs_cpmc: this.searchValue,
        },
      })
        .then((res) => {
          this.goodsArr = res.data;
          this.initList();
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 排序方法
    rankFun(type, val) {
      this[val] = this[val] === "down" ? "up" : "down";
      SERVE.rank({
        params: {
          cs_pxmc: type,
          cs_pxzhi: this[val],
        },
      })
        .then((res) => {
          this.goodsArr = res.data;
          this.initList();
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 处理数据的方法
    initList() {
      for (let item of this.goodsArr) {
        item.info = `库存：${item.kucun}件 | 已销：${item.yixiaoshou}件`;
      }
    },
    toGoodsDetails(item){
      this.$router.push({path: '/goodsDetails', query: {id: item.cp_id}});
    }
  },
};
</script>

<style lang="scss" scoped>
.goodsList {
  .rankBox {
    height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    & > p {
      height: 100%;
      width: calc(100% / 3);
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      border: 1px solid #bebebe;
    }
  }
}
</style>
<style>
.goodsList .van-card__desc {
  margin-top: 10px;
}
.goodsList .van-card__price {
  color: #ff4500;
}
</style>
